"use strict";
import * as React from 'react';
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
const { View, ScrollView, ImageBackground, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import SearchBar from "../../component/SearchBar";
import { SCREEN_WIDTH } from "../../constant";
import MyText from "../../component/MyText";
import { placeMembers, PlaceMenus } from "../../assets/data";
import Avatar from "../../component/Avatar";
import Line from "../../component/Line";
import Colors from "../../assets/styles/Colors";
import Request from "../../utils/Request";
import MyImage from "../../component/MyImage";
const { Grid, Card } = require('antd-mobile');
class Page extends React.Component {
    constructor() {
        super(...arguments);
        this.onGridItemPress = (index) => {
            switch (index) {
                case 0:
                    Actions.guestRegister();
                    return;
                case 1:
                    Actions.support();
                    return;
                case 2:
                    Actions.buildingGuide();
                    return;
                case 3:
                    Actions.active();
                    return;
            }
        };
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} title={<SearchBar placeholder='江宏大厦' leftIconName={'icon-ditu'} rightButtonWidth={0} onPress={Actions.search} editable={false}/>}/>
                <View style={commonStyles.flex1}>
                    <ScrollView>
                        <TouchableOpacity onPress={Actions.myPlaceDetail} activeOpacity={1}>
                            <MyImage source={require('../../assets/image/backgroung_one.png')} style={{ width: SCREEN_WIDTH, padding: 20 }}>
                                <MyText color={'#fff'} fontSize={25}>欢迎5层166位JIMU的小伙伴加入江宏大厦MarsSpace大家庭！9/27，本周四6pm-7:30pm，新老会员们一起在2层欢聚时光吧</MyText>
                                <View style={[commonStyles.flexRow, { marginTop: 20, alignItems: 'center' }]}>
                                    <Avatar source={{ uri: Request.checkImageUrl(this.props.auth.userInfo.avatar) }}/>
                                    <View style={{ marginLeft: 10 }}>
                                        <MyText color={Colors.White}>{this.props.auth.userInfo.nickName}</MyText>
                                        <MyText color={Colors.SubTitle}>{this.props.auth.userInfo.duty || ''}</MyText>
                                    </View>
                                </View>
                            </MyImage>
                        </TouchableOpacity>
                        <Grid data={PlaceMenus} columnNum={2} renderItem={(item, index) => {
            return (<TouchableOpacity style={[commonStyles.flex1, commonStyles.centerVH, { backgroundColor: '#fff' }]} onPress={this.onGridItemPress.bind(this, index)}>
                                    <Avatar source={item.icon} circle={false} style={Object.assign({}, item.size)}/>
                                    <MyText fontSize={14} color={'#333'} style={{ marginTop: 10 }}>{item.text}</MyText>
                                </TouchableOpacity>);
        }}/>
                        <Line height={20} color={'#f4f4f4'}/>
                        <View style={{ backgroundColor: '#fff', padding: 20 }}>
                            <MyText>社区团队</MyText>
                        </View>
                        <ImageBackground source={require('../../assets/image/background_two.png')} style={{ width: SCREEN_WIDTH }}>
                            <ScrollView horizontal>
                                {placeMembers.map((item, index) => {
            return (<Card key={index} style={{ marginVertical: 20, marginLeft: 10 }}>
                                            <Card.Body>
                                                <View style={[commonStyles.flex1, commonStyles.centerVH, {
                    backgroundColor: '#fff',
                    width: autoSize(172.5)
                }]}>
                                                    <Avatar source={item.avatar} circle={false} size={autoSize(80)}/>
                                                    <MyText fontSize={14} color={'#333'} style={{ marginTop: 10 }}>{item.name}</MyText>
                                                    <MyText fontSize={14} color={'#333'} style={{ marginTop: 10 }}>{item.position}</MyText>
                                                </View>
                                            </Card.Body>
                                        </Card>);
        })}
                            </ScrollView>
                        </ImageBackground>
                    </ScrollView>
                </View>
            </View>);
    }
}
export default connect(({ auth, place }) => ({ auth, place }))(Page);
